<template>
  <qx-table :dbRowClick="rowDblClick" :option="tableOption" :remoteData="remoteData" :rowCls="rowCls">
    <template v-slot:top>
      <qx-form v-model="searchForm" :option="tableOption" isSearch @submit="startSearch"></qx-form>
    </template>
    <template v-slot:menuLeft="{ selected = [] }">
      <q-btn outline text-color="primary" unelevated @click="handleDispatch">
        {{ $t('TaskCore.ManualDispatch') }}
      </q-btn>
      <q-btn :disable="isDisable(selected)" outline text-color="primary" unelevated @click="handleReview(selected[0])">
        {{ $t('TaskCore.ManualReview') }}
      </q-btn>
      <q-btn :disable="isDisable(selected)" outline text-color="primary" unelevated
             @click="handleComplete(selected[0])">
        {{ $t('TaskCore.ManualComplete') }}
      </q-btn>
    </template>
    <template v-slot:menuLeftR>
      <q-icon color="warning" name="mdi-map-marker-question cursor-pointer cursor-hover" size="1.5rem">
        <q-tooltip class="q-pa-md" v-bind="$tooltipAttr">{{ $t('Misc.DblClickTips') }}</q-tooltip>
      </q-icon>
    </template>
    <template v-slot:multipointParam="{ row }">
      <QCodePrism :code="row.multipointParam" classes="ellipsis-3-lines overflow-hidden no-padding"></QCodePrism>
    </template>
  </qx-table>
  <q-modal v-model="modalVisible" :header="`${$t('Misc.SpecifyDetails', { name: $t('TaskCore.SubTask') })}`"
           :menuBtn="false" :persistent="false" width="750">
    <QInfo :columns="tableOption.column || []" :rowInfo="rowInfo" cols="3">
      <template v-slot:multipointParam="{ row }">
        <QLink classes="multiRow_2 text-caption non-selectable multipoint-params"
               @click="handleJsonPopup(row.multipointParam)">
          {{ row.multipointParam }}
        </QLink>
      </template>
    </QInfo>
  </q-modal>
  <q-modal v-model="completeVisible" :header="`${$t('TaskCore.ManualComplete')}`" width="500" @beforeClose="beforeClose"
           @confirm="submitForm">
    <qx-form ref="FormRef" v-model="formInfo" :option="completeOption"></qx-form>
  </q-modal>
  <JsonPopup v-model="popupVisible" :jsonInfo="jsonInfo" :targetEl="targetEl"></JsonPopup>
</template>
<script setup>
import { i18n, toI18nName } from 'boot/i18n.js'
import { postAPI } from 'src/api/index.js'
import { getRemoteData } from 'src/enum/ajaxRemoteData.js'
import { AGVTypes, taskStatus, yesOrNo } from 'src/enum/index.js'
import { createDialog } from 'src/utils/utils.js'
import { moveTargetTypes, taskCreationModes } from 'src/views/TaskCore/enum.js'
import { computed, onMounted, ref } from 'vue'

const maps = ref([])
const rowInfo = ref({})
const jsonInfo = ref('')
const formInfo = ref({})
const AGVBrands = ref([])
const FormRef = ref(null)
const searchForm = ref({})
const targetEl = ref(false)
const popupVisible = ref(false)
const modalVisible = ref(false)
const completeVisible = ref(false)
const remoteData = ref({ dicUrl: '/yfagv/api/execL3TcrSplitTask/list' })
getRemoteData('agv_map', '/yfagv/api/agvMap/findList').then(data => (maps.value = data))
getRemoteData('agv_brand', '/yfagv/api/agvCfgBrand/list').then(data => (AGVBrands.value = data))
const isDisable = computed(() => selected => {
  if (!selected || selected.length !== 1 || ['6', '8'].includes(selected[0].taskStatus)) return true
  return selected[0].sysInner === '1'
})
const tableOption = computed(() => {
  return {
    span: 22, export: true, labelWidth: 60, searchSpan: 3, selection: 'single',
    column: [{
      label: `${i18n.t('TaskCore.SubTaskCode')}`, field: 'taskCode', minWidth: 80
    }, {
      label: `${i18n.t('TaskCore.TaskCode')}`, field: 'parentTaskCode', minWidth: 80
    }, {
      label: `${i18n.t('TaskCore.TaskGroupCode')}`, field: 'taskGroupCode', minWidth: 80
    }, {
      label: `${i18n.t('TaskCore.TaskTemplateCode')}`, field: 'rcsTaskType', minWidth: 80
    }, {
      label: `${i18n.t('TaskCore.TaskStatus')}`, field: 'taskStatus', type: 'select', options: taskStatus.value,
      minWidth: 80, useTag: true
    }, {
      label: `${i18n.t('MapCore.RelatedMap')}`, field: 'mapGroundCode', type: 'select', minWidth: 80,
      props: { label: 'mapName', value: 'mapGroundCode' }, options: maps.value
    }, {
      label: `${i18n.t('TaskCore.SplitTask')}`, field: 'isSplitTask', minWidth: 80, options: yesOrNo.value,
      useTag: true, search: false, hide: true
    }, {
      label: `${i18n.t('TaskCore.SubTaskOrder')}`, field: 'stepNumber', minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('AGVCore.AGVBrand')}`, field: 'agvBrandCode', type: 'select', options: AGVBrands.value,
      minWidth: 80, props: { label: `${toI18nName('agvBrandNameZhCn')}`, value: 'agvBrandCode' }
    }, {
      label: `${i18n.t('AGVCore.AGVType')}`, field: 'agvTypeCode', type: 'select', options: AGVTypes.value,
      minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('AGVCore.AGVCode')}`, field: 'agvCode', minWidth: 80
    }, {
      label: `${i18n.t('TaskCore.MoveTargetType')}`, field: 'moveObjectType', options: moveTargetTypes.value,
      minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('Misc.WaitReason')}`, field: 'waitReason', minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('Misc.ExceptionReason')}`, field: 'exceptionMsg', minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('TaskCore.TaskCreationMode')}`, field: 'splitTaskExecType', options: taskCreationModes.value,
      minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('MapCore.MultiPointParams')}`, field: 'multipointParam', minWidth: 80, search: false,
      hide: true, slot: true
    }, {
      label: `${i18n.t('MapCore.StartArea')}`, field: 'startAreaCode', minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('MapCore.EndArea')}`, field: 'endAreaCode', minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('MapCore.StartStation')}`, field: 'startPositionCode', minWidth: 80
    }, {
      label: `${i18n.t('MapCore.EndStation')}`, field: 'endPositionCode', minWidth: 80
    }, {
      label: `${i18n.t('CarrierCore.StartRackCode')}`, field: 'startShelvesCode', minWidth: 80,
      search: false, hide: true
    }, {
      label: `${i18n.t('CarrierCore.EndRackCode')}`, field: 'endShelvesCode', minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('CarrierCore.StartSlotCode')}`, field: 'startStorageCode', minWidth: 80,
      search: false, hide: true
    }, {
      label: `${i18n.t('CarrierCore.EndSlotCode')}`, field: 'endStorageCode', minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('Misc.IsBlindLift')}`, field: 'isBlindLift', options: yesOrNo.value, useTag: true,
      minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('AGVCore.IsLocked')}`, field: 'isLockAgv', options: yesOrNo.value, useTag: true,
      minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('Misc.Priority')}`, field: 'priority', minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('CarrierCore.RackType')}`, field: 'shelvesTypeCode', minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('CarrierCore.RackCode')}`, field: 'shelvesCode', minWidth: 80, hide: true
    }, {
      label: `${i18n.t('CarrierCore.ContainerType')}`, field: 'containerTypeCode', minWidth: 80,
      search: false, hide: true
    }, {
      label: `${i18n.t('CreationTime')}`, field: 'createdTime', type: 'daterange', minWidth: 80
    }, {
      label: `${i18n.t('Misc.ScheduleTime')}`, field: 'execDispatchTime', minWidth: 80, search: false
    }, {
      label: `${i18n.t('StartTime')}`, field: 'execBeginTime', minWidth: 80, search: false
    }, {
      label: `${i18n.t('Misc.ExitTime')}`, field: 'execOutTime', minWidth: 80, search: false
    }, {
      label: `${i18n.t('EndTime')}`, field: 'execEndTime', minWidth: 80, search: false
    }, {
      label: `${i18n.t('CarrierCore.RackTypeFilled')}`, field: 'isFillShelvesTypeCode', options: yesOrNo.value,
      useTag: true, minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('CarrierCore.CheckRackStationRelation')}`, field: 'isCheckShelvesPosition',
      options: yesOrNo.value, useTag: true, minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('TaskCore.TaskSource')}`, field: 'appId', minWidth: 80, search: false, hide: true
    }]
  }
})
const completeOption = computed(() => {
  return {
    span: 22, column: [{ label: `${i18n.t('Remarks')}`, field: 'remark', type: 'textarea', maxlength: 200 }]
  }
})

const rowCls = ({ row }) => row.taskStatus === '7' ? 'text-red-4' : ''
const rowDblClick = row => {
  rowInfo.value = row
  modalVisible.value = true
}
const handleDispatch = () => {
  createDialog({ msg: `${i18n.t('TaskCore.ManualDispatchTips')}` }, () => {
    postAPI('/yfagv/api/execL3TcrSplitTask/manualScheduling', {}, () => startSearch())
  })
}
const handleReview = ({ taskCode: splitTaskCode }) => {
  createDialog({ msg: `${i18n.t('TaskCore.ManualReviewTips')}` }, () => {
    postAPI('/yfagv/api/execL3TcrSplitTask/reviewSplitTask', { splitTaskCode }, () => startSearch())
  })
}
const handleComplete = ({ taskCode: splitTaskCode }) => {
  formInfo.value = { splitTaskCode }
  completeVisible.value = true
}
const handleJsonPopup = json => {
  jsonInfo.value = json
  popupVisible.value = !popupVisible.value
  targetEl.value = '.multipoint-params'
}
const formatSearchForm = () => {
  const params = { ...searchForm.value }
  if (searchForm.value.createdTime?.from) {
    params.createdStartTime = params.createdTime?.from
    params.createdEndTime = params.createdTime?.to
    delete params.createdTime
  }
  return { ...params }
}
const startSearch = (_, done) => {
  remoteData.value.params = formatSearchForm()
  remoteData.value.clearSelected = true
  if (done) done()
}
const beforeClose = () => {
  if (FormRef.value) FormRef.value.onReset()
  completeVisible.value = false
}
const submitForm = mDone => {
  FormRef.value.validate((form, done) => {
    postAPI('/yfagv/api/execL3TcrSplitTask/manuallyFinishSplitTask', form, () => {
      startSearch()
      done()
      mDone && mDone()
    }, () => {
      done()
      mDone && mDone(false)
    })
  }, () => mDone && mDone(false))
}

onMounted(startSearch)
</script>